import React, { Component } from 'react'
import { Switch, Route, NavLink } from "react-router-dom";
import Home from "../home/Home";
import Shop from "../shop/shop";
import Cate from "../cate/cate";
import Mine from "../mine/mine";
import home_no from "../../assets/img/1.png";
import home_have from "../../assets/img/11.png";
import cate_no from "../../assets/img/2.png";
import cate_have from "../../assets/img/22.png";
import shop_no from "../../assets/img/3.png"
import shop_have from "../../assets/img/33.png"
import mine_no from "../../assets/img/4.png"
import mine_have from "../../assets/img/44.png"
import "./Index.less";

export default class login extends Component {
    render() {
        let {
            location: { pathname },
        } = this.props;
        return (
            <div className="body">
                <Switch>
                    <Route path="/index/home" component={Home}></Route>
                    <Route path="/index/cate" component={Cate}></Route>
                    <Route path="/index/shop" component={Shop}></Route>
                    <Route path="/index/mine" component={Mine}></Route>
                </Switch>

                <footer className="footer">
                    <NavLink activeClassName="select" to="/index/Home">
                        <img src={pathname === "/index/home" ? home_have : home_no} alt="" />
                        {/* <span>首页</span> */}
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/cate">
                        <img src={pathname === "/index/cate" ? cate_have : cate_no} alt="" />
                        {/* <span>分类</span> */}
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/shop">
                        <img src={pathname === "/index/shop" ? shop_have : shop_no} alt="" />
                        {/* <span>购物车</span> */}
                    </NavLink>
                    <NavLink activeClassName="select" to="/index/mine">
                        <img src={pathname === "/index/mine" ? mine_have : mine_no} alt="" />
                        {/* <span>我的</span> */}
                    </NavLink>
                </footer>
            </div>
        )
    }
}
